SVG

Diese Seite ist noch in Bearbeitung.

Die folgende Grafik wurde per SVG erzeugt:

Hier der Source-Code:

<svg width=90% style="background:hsl(190,15%,96%);">
   <circle cx="200" cy="50" r="40" fill=white stroke=black />
   <rect x="100" y="10" width="80" height="60" fill=blue stroke=green stroke-width=10 />
<g transform="translate(45,45)" …>
   <circle cx="0" cy="0" r="15" />
<image xlink:href="pixelbild.jpg"
   y="5" x="100"  
   height="140" width="230" />
</svg>

Sie wird in die Tags <svg .....> und </svg> eingebettet. Mit den Attributen width und height wird die Ausdehnung beschrieben.

Das Koordinatensystem von SVG besitzt den Nullpunkt links oben.
Die Einheiten entsprechen denen von CSS (Cascadign Style Sheets) (%, em, ex, px, pc, pt, mm, cm, in).

Linie

<line x1="5" y1="10" x2="80" y2="40" />

Polyline

<polyline points="20,10 40,30 60,70" />

Polygone sind wie Polylinien, nur dass der letzte Punkt zum ersten verbindet.

<polygon points="20,10 40,30 60,70" />

Rechteck

<rect x="12" y="12" width="100" height="10" rx="2" ry="3" />

rx - Radius x, ry - Radius y bei abgerundeten Ecken.

Kreis

<circle cx="12" cy="12" r="6"/>

Mittelpunkt 12,12, Radius 6

Text

<text x="10" y="15">Dies ist der Text</text>

Gruppen

Gruppiert einen Kreis und ein Rechteck

<g fill="none" stroke="red" stroke-width="2">
    <circle ...
    <rect ....
</g>

In die Grafik kann auch Text eingebunden werden:

<svg width=200 height=45>
<rect x=0 y=0 width=100 height=20 fill=white stroke=black>Hallo</rect>
<text x=11 y=15>Ein Text</text>
<rect x=0 y=21 width=100 height=20 fill=white stroke=red>Hallo</rect>
</svg>